import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import hljs from 'highlight.js' // hljs对象
import 'highlight.js/styles/default.css' // 代码高亮的样式
import directiveObj from './utils/directive'
import './VueComponents' // Vant组件注册，单独使用一个js文件，让入口文件main.js更清晰

Vue.directive('highlight', function (el) { // 自定义一个代码高亮指令
  const highlight = el.querySelectorAll('pre, code') // 获取里面所有pre或者code标签
  highlight.forEach((block) => {
    hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言)
  })
})
// 执行目标对象里的install方法并传入Vue类
Vue.use(directiveObj)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// 首页 -> 滚动位置保存
// 问题：首页滚动一些，点击我的，切换回来 滚动条回到顶部
// 疑惑：keep-alive保存组件标签+样式+js变量，不会保存滚动位置
// 原因：切换到我的页面，我的页面高度不够高，没有滚动条，（此滚动条是整个网页的滚动条，共用一个滚动条）
// 滚动位置会回到顶部，所以切换到首页只是内容改变了，滚动条还是在顶部
// 解决：首页失去焦点（被切走的时候），在它的路由对象meta中保存滚动位置
// 切换时因为我的页面宽度不够高，没有滚动条，所以在顶部，再切首页也是顶部（共用一个滚动条）
// 解决：在首页滚动时,获取滚动条高度,切回来时给html的scrollTop赋值保存的高度

// 1.开发环境，生产环境， 是两套不同的环境
// 开发环境需要console.log使用
// 生产环境不需console.log使用
// 让一套代码，在2个环境自动生效。判断是不是生产环境，是就去掉console.log
// nodejs打包时执行main.js代码时。node内全局内置变量process（固定）
console.log(process)
// 2.服务器根目录下，可以新建环境变量配置文件（文件名固定）
// 脚手架环境webpack内置好的，文件名（可以修改的但是要改配置-自行百度）
// .env.development
// .env.production
// 3.环境变量文件中，定义变量名NODE_ENV(固定)，BASE_URL(固定)， 自定义变量名 VUE_APP_ 开头（规定）
// key名必须一致。写代码一套代码.key名，会自动匹配环境变量值
// 4.yarn server 启动项目， .env.development内变量挂到process.env属性上
// yarn build打包项目， .env.production 内变量挂在process.env属性上
if (process.env.NODE_ENV !== 'development') { // process是Node环境全部变量, 运行时根据敲击的命令不同, 脚手架会取环境变量给env添加属性和值
  console.log = function () {}
  console.error = function () {}
  console.dir = function () {}
}
